<template>
  <a-card class="body-container">
    <s-list-form>
      <template #less>
        <s-form-item size="list-middle" label="所属部门">
          <s-select-tree
            v-model="query.orgId"
            placeholder="请选择"
            url="/realm/dept/selectList"
            allow-clear
            value-field="id"
          />
        </s-form-item>
        <s-form-item size="list-middle" label="用户账号">
          <s-input v-model="query.userName" placeholder="用户账号" />
        </s-form-item>
        <s-form-item size="list-middle" label="昵称">
          <s-input v-model="query.nickName" placeholder="昵称" />
        </s-form-item>
        <s-form-item size="list-middle" label="手机号">
          <s-input v-model="query.phone" placeholder="手机号" />
        </s-form-item>
      </template>
      <template #more />
    </s-list-form>
    <s-tool-bar>
      <template #left>
        <s-button
          v-if="authorize.user.insert"
          type="primary"
          icon="plus-outlined"
          @click="
            $refs.add.init((dialog) => {
              ;(itemFormValue = {}), dialog.open()
            })
          "
          >新增</s-button
        >
        <a-popconfirm
          v-if="authorize.permission.reloadUserPermissions"
          title="确认刷新所有缓存？"
          ok-text="是"
          cancel-text="否"
          @confirm="reloadUserPermissions()"
        >
          <s-button type="primary" icon="redo-outlined">刷新权限</s-button>
        </a-popconfirm>
        <a-popconfirm
          v-if="authorize.user.deleteMulti"
          title="确认删除所选数据？"
          ok-text="是"
          cancel-text="否"
          @confirm="deleteMulti"
        >
          <s-button type="danger" icon="delete-outlined">删除</s-button>
        </a-popconfirm>
      </template>
      <template #right>
        <s-button type="primary" icon="search-outlined" @click="$refs.table.search(query)"
          >查询</s-button
        >
        <s-button
          style="margin-left: 8px"
          icon="stop-outlined"
          @click="
            () => {
              query = {}
              $refs.table.search(query)
            }
          "
          >重置</s-button
        >
      </template>
    </s-tool-bar>
    <s-table
      ref="table"
      :scroll="{ y: tableHeight }"
      bordered
      :columns="columns"
      url="/realm/user/pageList"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a
            v-if="authorize.user.selectOneById"
            style="margin-right: 8px"
            @click="detail(record.id, $refs.detail)"
          >
            <s-icon type="eye-outlined" />查看
          </a>
          <a
            v-if="authorize.user.update"
            style="margin-right: 8px"
            @click="detail(record.id, $refs.update)"
          >
            <s-icon type="edit-outlined" />编辑
          </a>
          <a-popconfirm
            v-if="authorize.user.delete"
            title="确认删除此条数据？"
            ok-text="是"
            cancel-text="否"
            @confirm="deleteById(record.id)"
          >
            <a style="margin-right: 8px"> <s-icon type="delete-outlined" />删除 </a>
          </a-popconfirm>
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link" @click.prevent> 更多<s-icon type="down-outlined" /> </a>
            <template #overlay>
              <a-menu>
                <a-menu-item
                  v-if="authorize.user.changePassword"
                  @click="$refs.updatePassword.open(record.id)"
                >
                  <a>修改密码</a>
                </a-menu-item>
                <a-menu-divider v-if="authorize.user.changePassword" />
                <a-menu-item
                  v-if="authorize.user.enable && record.state == 0"
                  @click="enable(record.id)"
                >
                  <a>启用</a>
                </a-menu-item>
                <a-menu-divider v-if="authorize.user.enable && record.state == 0" />
                <a-menu-item
                  v-if="authorize.user.disable && record.state == 1"
                  @click="$refs.userDisable.open(record.id)"
                >
                  <a>禁用</a>
                </a-menu-item>
                <a-menu-divider v-if="authorize.user.disable && record.state == 1" />
                <a-menu-item
                  v-if="authorize.permission.reloadUserPermissions"
                  @click="reloadUserPermissions(record.id)"
                >
                  <a>刷新权限</a>
                </a-menu-item>
                <a-menu-divider v-if="authorize.permission.reloadUserPermissions" />
                <a-menu-item v-if="authorize.active.list" @click="$refs.activeUser.open(record.id)">
                  <a>会话管理</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
        <template v-else-if="column.key === 'state'">
          <span v-if="record.state === 1" :class="'green-text'">正常</span>
          <span v-else :class="'red-text'">已禁用</span>
        </template>
      </template>
    </s-table>
    <!--    <detail ref="detail" />
    <add
      ref="add"
      @success="
        () => {
          $refs.table.refresh()
        }
      "
    />
    <update
      ref="update"
      @success="
        () => {
          $refs.table.refresh()
        }
      "
    />-->
    <s-dynamic-form-dialog
      ref="add"
      v-model="itemFormValue"
      title="添加"
      form-id="aa2e83cb63454f5d8f5fce1c1abf5c96"
      @save="addItem"
    >
      <template #header>
        <s-form-item
          label="用户账号"
          name="userName"
          :rules="[
            { whitespace: true, required: true, message: '用户账号不能为空' },
            { max: 50, message: '最长为50' }
          ]"
        >
          <s-input v-model="itemFormValue.userName" placeholder="用户账号" />
        </s-form-item>
      </template>

      <s-form-item label="头像" name="headPortrait">
        <s-img v-model="itemFormValue.headPortrait" :max="1" />
      </s-form-item>
    </s-dynamic-form-dialog>
    <s-dynamic-form-dialog
      ref="detail"
      v-model="itemFormValue"
      disabled
      form-id="aa2e83cb63454f5d8f5fce1c1abf5c96"
    >
      <template #header>
        <s-form-item label="用户账号" name="userName">
          <s-input v-model="itemFormValue.userName" placeholder="用户账号" disabled />
        </s-form-item>
      </template>
      <s-form-item label="创建人">
        <s-input v-model="itemFormValue.createByAccount" disabled />
      </s-form-item>
      <s-form-item label="创建时间">
        <s-input v-model="itemFormValue.createDate" disabled />
      </s-form-item>
      <s-form-item label="修改人">
        <s-input v-model="itemFormValue.updateByAccount" disabled />
      </s-form-item>
      <s-form-item label="修改时间">
        <s-input v-model="itemFormValue.updateDate" disabled />
      </s-form-item>
      <s-form-item label="头像" name="headPortrait">
        <s-img v-model="itemFormValue.headPortrait" :max="1" />
      </s-form-item>
    </s-dynamic-form-dialog>
    <s-dynamic-form-dialog
      ref="update"
      v-model="itemFormValue"
      title="编辑"
      form-id="aa2e83cb63454f5d8f5fce1c1abf5c96"
      @save="updateItem"
    >
      <template #header>
        <s-form-item label="用户账号" name="userName">
          <s-input v-model="itemFormValue.userName" placeholder="用户账号" disabled />
        </s-form-item>
      </template>
      <s-form-item label="头像" name="headPortrait">
        <s-img v-model="itemFormValue.headPortrait" :max="1" />
      </s-form-item>
    </s-dynamic-form-dialog>
    <update-password ref="updatePassword" />
    <user-disable
      ref="userDisable"
      @success="
        () => {
          $refs.table.refresh()
        }
      "
    />
    <active-user ref="activeUser" />
  </a-card>
</template>

<script>
const columns = [
  {
    title: '账号',
    dataIndex: 'userName',
    sorter: true,
    minWidth: 100,
    ellipsis: true
  },
  {
    title: '昵称',
    dataIndex: 'nickName',
    sorter: true,
    width: 150,
    ellipsis: true
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    sorter: true,
    width: 150,
    ellipsis: true
  },
  {
    title: '账户状态',
    key: 'state',
    sorter: true,
    width: 130
  },
  {
    title: '创建日期',
    dataIndex: 'createDate',
    width: 200,
    sorter: true,
    ellipsis: true
  },
  {
    title: '登录IP',
    dataIndex: 'lastLoginIp',
    width: 200,
    sorter: true,
    ellipsis: true
  },
  {
    title: '登录日期',
    dataIndex: 'lastLoginDate',
    width: 200,
    sorter: true,
    ellipsis: true
  },

  {
    title: '操作',
    fixed: 'right',
    key: 'action',
    width: 300
  }
]
// import Detail from './detail/index.vue'
import ActiveUser from './activeUser/index.vue'
// import Add from './add/index.vue'
// import Update from './update/index.vue'
import UpdatePassword from './updatePassword/index.vue'
import UserDisable from './userDisable/index.vue'
export default {
  name: 'QueryList',
  components: { UpdatePassword, UserDisable, ActiveUser },
  data() {
    return {
      query: {},
      menu: {
        url: '/menu/template/selectList',
        selectedUrl: ''
      },
      role: {
        url: '/authority/role/selectList',
        selectedUrl: ''
      },
      columns: columns,
      itemFormValue: {}
    }
  },
  authorize: {
    user: '/realm/user/permissionList',
    role: '/authority/role/permissionList',
    menu: '/menu/template/permissionList',
    permission: '/authority/permission/permissionList',
    active: '/authority/activeUser/permissionList'
  },
  methods: {
    addItem(values, fullValue, dialog) {
      this.$api
        .PUT('/realm/user/insert', values)
        .then((res) => {
          dialog.close()
          this.$refs.table.refresh()
          this.$message.info(res.msg)
        })
        .catch(() => {
          dialog.reset()
        })
    },
    updateItem(values, fullValue, dialog) {
      values.id = fullValue.id
      this.$api
        .PUT('/realm/user/update', values)
        .then((res) => {
          dialog.close()
          this.$refs.table.refresh()
          this.$message.info(res.msg)
        })
        .catch(() => {
          dialog.reset()
        })
    },
    detail(id, ref) {
      const that = this
      ref.init((dialog) => {
        that.$loading(true)
        that.$api
          .GET('/realm/user/selectOneById', { id: id })
          .then((res) => {
            that.$loading(false)
            if (!res.data) {
              that.$message.warn('数据不存在')
            } else {
              that.itemFormValue = res.data
              dialog.open()
            }
          })
          .catch(() => {
            that.$loading(false)
          })
      })
    },
    enable(id) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      const that = this
      this.$confirm({
        title: '提示',
        content: '确定启用此账号？',
        okText: '确认',
        cancelText: '取消',
        onOk: function () {
          that.$loading(true)
          that.$api
            .PUT('/realm/user/enable', { id: id }, { dataType: 'form' })
            .then((res) => {
              that.$loading(false)
              that.$refs.table.refresh()
              that.$message.info(res.msg)
            })
            .catch(() => {
              that.$loading(false)
            })
        }
      })
    },
    reloadUserPermissions(id) {
      this.$loading(true)
      this.$api
        .GET('/authority/permission/reloadUserPermissions', { id: id })
        .then((res) => {
          this.$message.info(res.msg)
          this.$loading(false)
        })
        .catch(() => {
          this.$loading(false)
        })
    },
    deleteMulti() {
      const keys = this.$refs.table.getSelectedKeys()
      if (keys.length > 0) {
        this.$loading(true)
        this.$api
          .DELETE('/realm/user/deleteMulti', { ids: keys.toString() })
          .then((res) => {
            this.$loading(false)
            this.$message.info(res.msg)
            this.$refs.table.search(this.query)
          })
          .catch(() => {
            this.$loading(false)
          })
      }
    },
    deleteById(id) {
      this.$loading(true)
      this.$api
        .DELETE('/realm/user/delete', { id: id })
        .then((res) => {
          this.$loading(false)
          this.$message.info(res.msg)
          this.$refs.table.search(this.query)
        })
        .catch(() => {
          this.$loading(false)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.red-text {
  color: red;
}

.green-text {
  color: #2ac06d;
}
</style>
